<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        // function f1(){
        //     // let btn = document.getElementById("btn");
        //     // console.log(btn.innerHTML);
        //     document.getElementById("btn").onclick = function(){
        //         let btn = document.getElementById("btn");
        //         console.log(btn.innerHTML);
        //     };
        // }

        // 在源生js中,可以使用动态绑定的方式为按钮绑定事件
        // window.onload = function(){
        //     document.getElementById("btn").onclick=function(){
        //         let btn = document.getElementById("btn");
        //         console.log(btn.innerHTML);
        //     };
        // }

        // 在jquery中,也可以通过动态绑定的方式为按钮绑定事件
        // jquery中提供了ready方法,表示文档就绪之后,执行的事件
        // 此时在jquery中,所有的方法调用者必须是jquery对象
        // 文档在js中表示为document
        // 需要将js中的document转换成jquery对象
        // DOM对象-->jquery对象:$(DOM对象)
        // $(document).ready(function(){
        //     // 查找节点在jquery进行了封装
        //     // 通过$("选择器")进行查找
        //     // 在jquery中,所有的事件省略on关键字
        //     $("#btn").click(function(){
        //         // innerHTML、innerText
        //         // html()、text()
        //         console.log($("#btn").html());
        //     });
        // });

        // 由于在jquery中,一般均使用动态绑定进行实现
        // 文档调用就绪方法是必不可少的
        // 因此,可以进行简写
        // $(document).ready(fn)-->$(fn)
        $(function(){
            // 查找节点在jquery进行了封装
            // 通过$("选择器")进行查找
            // 在jquery中,所有的事件省略on关键字
            $("#btn").click(function(){
                // innerHTML、innerText
                // html()、text()
                // console.log($("#btn").html());
                // 在js中,存在一个关键字this
                // 在jquery,this也能使用
                // 但是,this仍然属于DOM对象
                // console.log(this.html());
                // console.log(this.innerHTML);
                // console.log($(this).html());
                // 需要将jquery对象转换成DOM对象
                // 两种转换方式
                    // 1.jquery对象.get(0)
                    // 2.jquery对象[0]
                console.log($("#btn").get(0).innerHTML);
                console.log($("#btn")[0].innerHTML);
            });
        });

    </script>
</head>
<body>
<!--<body onload="f1()">-->
<!--<button id="btn" onclick="f1()">测试</button>-->
<button id="btn">测试</button>
</body>
</html>